<template>
	<view class="page">
		<Navbar fixed statusBar leftIcon="back" title="果实详情" backgroundColor="transparent" color="white"></Navbar>
		<image style="width: 750upx;" src="/static/icons/gamePanel.jpg" mode="widthFix"></image>
		<view class="tree huxi1"><image :src="detail.imgUrl"></image></view>
		<view class="tree-glass">{{ detail.seedName }}</view>
		<!-- <view v-if="!showSettingAddress" @click="handleWater" class="jiaoshui huxi2"><image src="/static/icons/action_2.png"></image></view> -->
		<!-- <view v-if="!showSettingAddress" @click="handleUseProp" class="shifei huxi2"><image src="/static/icons/action_5.png"></image></view> -->
		<!-- <view @click="navTo(1)" class="myteam"><image src="/static/icons/myteam.png"></image></view> -->
		<!-- <view @click="navTo(2)" class="feiliao"><image src="/static/icons/feiliao.png"></image></view> -->
		<!-- 		<view @click="navTo(4)" class="shouhuo">
			<view class="shouhuo-tip">{{ finishCount }}</view>
			<image src="/static/icons/shouhuo.png"></image>
		</view> -->
		<!-- <view class="progress"><view :style="'width:' + progress + '%'" class="progress-line"></view></view> -->
		<!-- <view class="stage">成长值 {{ detail.seedGrowthValue }}/{{ detail.growthValue }} >>{{ detail.nextGrowthStateName }}</view> -->
		<view class="dongtai">
			<view class="dongtai-title">成长历程：</view>
			<block v-if="detail.growthProcess.length">
				<view :key="index" v-for="(item, index) in detail.growthProcess" class="item">
					<view class="item-left">{{ item }}</view>
					<!-- <view class="item-right">+成长值</view> -->
				</view>
			</block>

			<view v-if="detail.expressMessageVo" class="dongtai1">
				<view class="dongtai-title">收货地址：</view>

				<view class="item">
					<view class="item-left">{{ detail.expressMessageVo.realName }}</view>
					<view class="item-right">{{ detail.expressMessageVo.mobilePhone }}</view>
				</view>
				<view class="item"><view style="color: #848484;" class="item-left">{{detail.expressMessageVo.addressDetail}}</view></view>
				<view class="item">
					<view class="item-left">订单状态</view>
					<view class="item-right blue">{{ detail.expressMessageVo.expressState == 'y' ? '已发货' : '等待系统处理' }}</view>
				</view>
				<view class="item">
					<view class="item-left">物流详情</view>
					<view class="item-right">{{ detail.expressMessageVo.expressName || '无' }}</view>
				</view>
				<view class="item">
					<view class="item-left">快递单号</view>
					<view class="item-right">{{ detail.expressMessageVo.expressCode || '无' }}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import { plantFinishCount, planFinishDetail } from '@/service/farm.js';
import Navbar from '@/components/Navbar.vue';
export default {
	components: {
		Navbar
	},
	data() {
		return {
			finishCount: 0,
			progress: 0,
			showSettingAddress: false,
			detail: { imgUrl: '', growthProcess: [{ title: 'ceshi' }], expressMessageVo: {} },
			pageNum: 1,
			growthList: []
		};
	},
	onLoad(options) {
		this.id = options.id;
		plantFinishCount().then(v => {
			this.finishCount = v;
		});
		if (this.id) {
			this.getPlanTree();
		}
	},

	methods: {
		async getPlanTree() {
			const resp = await planFinishDetail({ userSeedId: this.id });

			this.detail = resp;
		},

		navTo(index) {
			let url = '';
			switch (index) {
				case 1:
					url = '/pages/game/farm/myTeam';
					break;
				case 2:
					url = '/pages/game/farm/myFertilizer';
					break;
				case 3:
					url = '/pages/game/farm/myTeam';
					break;
				case 4:
					url = '/pages/game/farm/harvested';
					break;
				case 4:
					url = '/pages/game/farm/detail';
					break;
				default:
					break;
			}
			uni.navigateTo({
				url
			});
		}
	}
};
</script>

<style lang="scss" scoped>
view {
	box-sizing: border-box;
}
.page {
	overflow: hidden;
	min-height: 100vh;
	background: #6fc52d;
	font-size: 0;
}
.tree {
	width: 650upx;
	margin: 0 auto;
	position: absolute;
	top: 100upx;
	z-index: 100;
	left: 0;
	right: 0;
	image {
		width: 650upx;
		height: 650upx;
	}
}
.tree-glass {
	font-size: 20upx;
	color: #ffebeb;
	transform: rotate(18deg);
	position: absolute;
	top: 502upx;
	left: 404upx;
}
.dongtai {
	position: absolute;
	margin: 0 auto;
	left: 0;
	right: 0;
	top: 700upx;
	width: 690upx;
	border-radius: 30upx;
	background-color: #e4f6c0;
	padding: 20upx 30upx;
	.item {
		display: flex;
		justify-content: space-between;
		color: #434343;
		font-size: 30upx;
		margin: 10upx 0;
		.item-left {
		}
		.item-right {
		}
	}
	.more {
		margin-top: 20upx;
		color: #4e8308;
		font-size: 30upx;
		text-align: right;
		font-weight: 500;
	}
}

.dongtai1 {
	position: absolute;
	margin: 0 auto;
	left: 0;
	right: 0;
	bottom: -400upx;
	width: 690upx;
	border-radius: 30upx;
	background-color: #e4f6c0;
	padding: 20upx 30upx;
	.item {
		display: flex;
		justify-content: space-between;
		color: #434343;
		font-size: 30upx;
		margin: 10upx 0;
		.item-left {
		}
		.item-right {
		}
	}
	.more {
		margin-top: 20upx;
		color: #4e8308;
		font-size: 30upx;
		text-align: right;
		font-weight: 500;
	}
}
.dongtai-title {
	font-size: 36upx;
	font-weight: 500;
	color: #588b14;
}
.jiaoshui {
	position: absolute;

	top: 720upx;
	right: 30upx;
	width: 100upx;
	height: 100upx;
	z-index: 100;
	image {
		width: 120upx;
		height: 120upx;
	}
}
.shifei {
	position: absolute;
	right: 30upx;
	top: 880upx;
	width: 100upx;
	z-index: 100;
	height: 100upx;
	image {
		width: 120upx;
		height: 120upx;
	}
}
.myteam {
	position: absolute;
	right: 30upx;
	top: 400upx;
	width: 100upx;
	z-index: 100;
	height: 100upx;
	image {
		width: 120upx;
		height: 110upx;
	}
}
.feiliao {
	position: absolute;
	right: 30upx;
	top: 600upx;
	width: 100upx;
	z-index: 100;
	height: 100upx;
	image {
		width: 120upx;
		height: 110upx;
	}
}
.shouhuo {
	position: absolute;
	left: 30upx;
	top: 100upx;
	width: 100upx;
	z-index: 100;
	height: 100upx;
	image {
		width: 120upx;
		height: 120upx;
	}
}
.progress {
	height: 34upx;
	width: 300upx;
	position: absolute;
	margin: 0 auto;
	left: 0;
	right: 0;
	padding: 6upx;
	top: 900upx;
	z-index: 100;
	background-color: #ffc44b;
	border-radius: 30upx;
	display: flex;
	align-items: center;
}

.progress-line {
	background: #77311d;
	width: 260upx;
	border-radius: 30upx;
	height: 24upx;
}
.shouhuo-tip {
	color: #ff6427;
	font-size: 24rpx;
	position: absolute;
	top: 5rpx;
	right: -6rpx;
	// position: relative;
	z-index: 100;
}
.stage {
	position: absolute;
	margin: 0 auto;
	left: 0;
	right: 0;
	display: flex;
	justify-content: center;
	color: #4c7610;
	font-size: 30upx;
	top: 950upx;
	z-index: 1;
}
.tip {
	position: absolute;
	margin: 0 auto;
	left: 0;
	right: 0;
	display: flex;
	justify-content: center;
	color: #4c7610;
	font-size: 20upx;
	top: 1110upx;
	z-index: 1;
}
.setting {
	position: absolute;
	margin: 0 auto;
	left: 0;
	right: 0;
	display: flex;
	justify-content: center;
	background: linear-gradient(to bottom, #ffea78, #ffe433);
	border-radius: 24upx;
	height: 100upx;
	width: 710upx;
	line-height: 100upx;
	text-align: center;
	color: #ff7030;
	font-size: 30upx;
	top: 1000upx;
	z-index: 1;
}
.blue {
	color: $primary;
}
</style>
